//Variable overrides
$body-bg-color: #000;
 
$base-color: #333;
$base-gradient: 'matte';
$active-color: #3d9ba1;
$bright_color: #f7941d; 

$button_height: 1.8em; 
$button_radius: .4em; 
$button_stroke_weight: .1em; 
$button_gradient: 3d9ba1;
 
$tabs-dark: #000;
$tabs-light: #555;
 
$tabs-bottom-radius: 0;
$tabs-bottom-gradient: 'bevel';
$tabs-bar-gradient: 'glossy';
$tabs-bottom-active-gradient: 'recessed';

 
$toolbar-gradient: 'glossy';;

//Imports
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;
@include sencha-button-ui('lightbg', #74bac0, 'glossy');
@include sencha-toolbar-ui('toptab', #bfbfbf, 'matte');

// Customizations


// Forms
.form {
	background-color: black;
	color: white
	}

//Group header bar
.x-list-header {
	background-color:#3d9ba1;
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d9ba1), color-stop(2%, #74bac0), color-stop(100%, #3d9ba1));
	background-image:linear-gradient(#3d9ba1, #74bac0 2%, #3d9ba1);
	color:#ffffff;
	text-shadow:rgba(255, 255, 255, 0.25) 0 0.08em 0;
	border-top:1px solid #3d9ba1;
	border-bottom:1px solid #3d9ba1;
	font-weight:bold;
	font-size:0.8em;
	padding:0.2em 1.02em;
	text-shadow:rgba(255, 255, 255, 0.25) 0 0.08em 0;
	-webkit-box-shadow:0px 0.1em 0.3em rgba(0, 0, 0, 0.3);
	text-align: center
}




/////////////////////////////////// Bottom Tab Bar!! ////////////////////////////////////
.x-tabbar.x-docked-bottom .x-tab {
	/*original
	display:-webkit-box;
	display:box;
	-webkit-box-direction:reverse;
	box-direction:reverse;
	-webkit-box-orient:vertical;
	box-orient:vertical;
	-webkit-border-radius:0.25em;
	border-radius:0.25em;
	margin:.5em;
	padding: 0 .5em 0 .5em;
	min-width:3.3em;
	position:relative
	*/
	display:-webkit-box;
	display:box;
	-webkit-box-direction:reverse;
	box-direction:reverse;
	-webkit-box-orient:vertical;
	box-orient:vertical;
	-webkit-border-radius:0.25em;
	border-radius:0.25em;
	margin:0;
	padding: .5em;
	min-width:30%;
	position:relative
}
.x-tabbar.x-docked-bottom .x-tab img {
	-webkit-mask-size:1.65em;
	width:1.65em;
	height:1.65em;
	display:block;
	margin:.4em auto .1em;
	position:relative
}/*troyedit*/
.x-tabbar.x-docked-bottom .x-tab .x-button-label, .x-tabbar.x-docked-bottom .x-tab .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-bottom .x-tab .x-badge {
	margin:0;
	font-size:12px;
	line-height:24px;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased
}

/////////////////////////////////// Bottom Tab Bar Active!! ////////////////////////////////////
/*set text color for active tab*/
.x-tabbar-dark .x-tab-active {
	color:#3d9ba1;
	/*color:white;*/
}


/////////////////////////////////// Top Tab Bar ////////////////////////////////////
.x-tabbar.x-docked-top {
	border-bottom:.1em solid;
	height:2.6em;
	padding:0 .8em
}
.x-tabbar.x-docked-top .x-tab {
	margin:.4em .2em;
	padding:0.4em 0.8em;
	height:1.8em;
	-webkit-border-radius:0.9em;
	border-radius:0.9em
}
.x-tabbar.x-docked-top .x-tab-active {
	-webkit-box-shadow:rgba(255, 255, 255, 0.2) 0 0.1em 0.1em, inset rgba(0, 0, 0, 0.3) 0 0.1em 0.2em
}
.x-tabbar.x-docked-top .x-button-label, .x-tabbar.x-docked-top .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-top .x-badge {
	font-size:.8em;
	line-height:1.2em;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased
}

///////////////////////////////////  Tab Bar Light (used for top tab) ////////////////////////////////////
.x-tabbar-light {
	background-color:#475c76;
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #96a9c0), color-stop(2%, #546e8c), color-stop(100%, #394b5f));
	background-image:linear-gradient(#96a9c0, #546e8c 2%, #394b5f);
	border-color:#3d5066
}
.x-tabbar-light .x-tab {
	color:#b6c3d3;
}
.x-tabbar-light .x-tab-active {
	color:white
}
.x-tabbar-light .x-tab-pressed {
	color:white
}
.x-tabbar-light.x-docked-top .x-tab-active {
	background-color:#3d5066;
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a3746), color-stop(10%, #344356), color-stop(65%, #3d5066), color-stop(100%, #3e5167));
	background-image:linear-gradient(#2a3746, #344356 10%, #3d5066 65%, #3e5167);
	color:white
}



.clear {
       clear: both;
}


.geotag {
	background-image:url('../../images/filter_rest.png');
}

.outlink {
       color: #0099cc;
       text-decoration: none;
}

/////////////////////////////////// Tweets!! ////////////////////////////////////
#touchpoint_container_replied_, 
#touchpoint_container_announced_, 
#touchpoint_container_commented_,  
#touchpoint_container_asked_, 
#touchpoint_container_reviewed_,
#touchpoint_container_replied_yes, 
#touchpoint_container_announced_yes, 
#touchpoint_container_commented_yes, 
#touchpoint_container_suggested_yes, 
#touchpoint_container_asked_yes, 
#touchpoint_container_reviewed_yes  {
       margin: 0px;
       padding: 5px;
       background: #fff; /* can set to different colour for different type of posts */
       -webkit-border-radius: .5em;
       -moz-border-radius: .5em;
       border-radius: .5em;
       border: 1px solid #f7941d; /* can set to different colour for different type of posts */
}

#touchpoint_container_suggested_{/* Justine edited this starting on this line*/
  margin: 0px;
  padding: 5px;
  background: #f7f7f7;
  /* can set to different colour for different type of posts 
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  border: 1px solid #f7941d;*/
  /* can set to different colour for different type of posts */
}


/* can set to different border style for stack*/
#touchpoint_container_replied_yes, 
#touchpoint_container_announced_yes, 
#touchpoint_container_commented_yes, 
#touchpoint_container_suggested_yes, 
#touchpoint_container_asked_yes, 
#touchpoint_container_reviewed_yes  {
       border-bottom: 4px double #f7941d;
	   border-right: 4px double #f7941d;
	   /*-moz-box-shadow: 2px 2px 4px hsla(0,0%,0%,.3);
	   -webkit-box-shadow: 2px 2px 4px hsla(0,0%,0%,.3);
	   box-shadow: 2px 2px 4px hsla(0,0%,0%,.3);*/
}

#touchpoint_container_announced_ {
}

#touchpoint_container_commented_ {
}

#touchpoint_container_suggested_ {
}

#touchpoint_container_replied_ {
	margin-left: 15px;
}

#touchpoint_container_asked_ {
}

#touchpoint_container_reviewed_ {
}



.touchpoint_data {
       margin-bottom: 0;
       /*border-bottom: 1px solid #e3e3e3;*/
       padding: 0;
	   position: relative;
}
.touchpoint_icon {
       float: left;
       width: 50px;
}
.touchpoint_icon img{
	   border-radius: 5px;
	   -moz-border-radius: 5px;
	   -webkit-border-radius: 5px;
	   border: #CCC 1px;
}

.touchpoint_content_replied,
.touchpoint_content_announced, 
.touchpoint_content_commented, 
.touchpoint_content_suggested, 
.touchpoint_content_asked, 
.touchpoint_content_reviewed{
       float: left;
       width: 225px;
       line-height: 18px;
       font-size: 12px;
	   padding-bottom: 20px;
}

.touchpoint_content_replied{
	width: 205px;
}

.touchpoint_content_asked .type{
       font-weight: bold;
       color: #f7941d;
	
}
.touchpoint_content_suggested .type{
       font-weight: bold;
       color: #ccc914;
	
}
.touchpoint_content_announced .type{
       font-weight: bold;
       color: #f7501d;
	
}
.type {
       font-weight: bold;
       color: #3d9ba1;
       text-decoration: none;
	
}



//////////////////////////// List item box ////////////////////////////
.x-list .x-list-item {
	position:relative;
	color: black;
	padding:0.5em 0.8em;
	min-height:2.6em;
	display:-webkit-box;
	display:box;
	border-top:1px solid #fdbc25
}
.x-list .x-list-item:last-child {
	border-bottom:1px solid #fdbc25
}

//////////////////////////// list item box for feeds ////////////////////////////
.feeds {
	background-color:#2f2f2e; //this works
	border-top: 1px solid #2f2f2e; //this does not work
}

/*position: relative;
color: black;
padding: 0.5em 0.8em;
min-height: 2.6em;
display: -webkit-box;
display: box;
border-top: 1px solid #FDBC25;*/



////////////////////////////////////// list bar highlight removals //////////////////////////////////////

.x-list .x-list-item.x-item-pressed {
    border-top-color:#d1d1d1;
    background-color:#ffffff none      
}
.x-list .x-list-item.x-item-selected {
    background-image:none;
    background-image:none;
    color:black;
    text-shadow:none;
    border-top-color:#f7941d;
    border-bottom-color:#f7941d;
    background-color:#ffffff; 
}

.x-list .x-list-item:last-child {
	border-bottom:none;
}





/* format the + button for thread*/
.plus_yes {
	width: 30px;
	height: 30px;
	float: right;
	margin-top: -25px;
	position: relative;
	right: 5px;
	//margin-left: -20px;
	//background-color:#2f2f2e;
	/*float:right; 
	margin-right: 0.05em;
	v-align: middle;*/
}

/* format the + button for normal posts*/
.plus_ {
	width: 30px;
	height: 30px;
	float: right;
	margin-top: -25px;
	position: relative;
	right: 7px;
	//margin-left: -20px;
	//background-color:#aaaaaa;
	/*float:right; 
	margin-right: 0.25em;
	v-align: middle;*/
}

/* format the notifications */
.note_title,
.note_announcement,
.note_help,
.note_notification,
.note_unread,
.note_read
{
	
}

.note_title
{
	background-color: #5d89bd;
	color: #036;	
	font-weight: bold;
	padding: 0.5em;
	background-image: -webkit-gradient(linear,
					0 0, 0 30,
					from(hsla(0,0%,100%,.6)),
					to(hsla(0,0%,100%,0))
					);
	
}

.touchpoint {
       font-weight: bold;
       color: #000000;
       text-decoration: none;
}

 #tweet_container {
       /*     margin: 10px;
            padding: 5px;*/
            background: #fff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            border: 1px solid #8BBCD6;
        }
        .clear {
            clear: both;
        }
        .tweet_data {
            margin-bottom: 0;
          /*  border-bottom: 1px solid #ffffff;*/
            padding: 0;
          
        }
        .tweet_avatar {
            float: left;
            width: 40px;
        }
        .tweet_content {
            float: left;
            width: 235px;
            line-height: 16px;
            color: #333;
            font-size: 11px;
    
        }
		.tweet-details {
			color:#999;
			font-size: 11px;
			margin-top: 3px;
			vertical-align:sub;
		}
        .user {
            font-weight: bold;
            color: #8BBCD6;
            text-decoration: none;
        }
        .outlink {
            color: #0099cc;
            text-decoration: none;
        }
	 #tweet_container1 {
           /* margin: 10px;*/
            padding: 5px;
            background: #fff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            border: 1px solid #8BBCD6;
        }
	.tweet_data1 {
            margin-bottom: 0px;
          /*  border-bottom: 1px solid #ffffff;*/
            /*padding: 5px;*/
        }
		
/*Emme's additions*/

/*List headers and details*/
.list-icon{
	float:left;
	margin-right:5px; 
	clear:right
}
.list-block{
	float:left
}

.list-detail-large {
	font-size: 100%;
	color: #000;
}
.list-detail-small {
	font-size: 80%;
	color: #666;
}
.tp {
	float:right;
}

/*added by Kagonya*/
#mapper { height: 85%; width: 100%; border: 1px solid #888; }

/*List headers and details on map*/
.mappanel{
	min-width:400px;
	display: block;
	border-bottom:thin #CCC;
	border-style:solid;
	border-top:none;
	border-left:none;
	border-right:none;
	padding: 0 0 0 0.5em ;
	margin-left:-40px;
}

.maplist-detail-large {
	font-size: 75%;
}
.maplist-detail-small {
	font-size: 65%;
	color: #666;
}

/////////////////////////*home buttons, text and alignment*/////////////////////////////
p.button-label{
	font-size:small;
	font-weight:bold;
	text-align: center;
	display: block;
	padding: 2px;
	color: #bfbfbf;
}
img.button-image{
	display: block;
    margin-left: auto;
    margin-right: auto;
}
.home-buttons{
	min-width:100px;
	height: 100px;
}

.x-button.noteBtn.x-button-normal {
	font-size: medium;
	color: #000000;
	font-weight: bold;
	border:0 solid #999999;
	border-top-color:#3d9ba1;
	text-shadow:rgba(255, 255, 255, 0.25) 0 0em 0;
	-webkit-box-shadow:rgba(255, 255, 255, 0.1) 0 0em 0;
	-webkit-border-radius:0em;
	/*background-image: none;*/
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d9ba1), color-stop(50%, #74bac0), color-stop(100%, #3d9ba1));
	/*background-image:linear-gradient(#000000, #dedede 2%, #bababa)*/
}

.x-panel.notebar{
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d9ba1), color-stop(50%, #74bac0), color-stop(100%, #3d9ba1));
	/*-webkit-gradient(linear, center bottom, center top, from(green), color-stop(50%,yellow), to(blue));*/
}

/*timebar styles*/
#timebar{
	background-color:#000;
	padding:7px 5px 0 7px;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font: "Helvetica Neue Light", "Helvetica Neue Medium", "Helvetica Neue UltraLight";
}

#timebar-leftleft{
	display: block;
	
	float:left;
	text-align: left;
	color:#FFF;
	margin: 0 0 0 10px;
	padding: 0 30px 0 0;
	line-height: 90%;
}

#timebar-left{
	display: block;
	
	float:left;
	text-align: right;
	color:#FFF;
	margin: 5px 0 5px 0;
	padding: 0 5px 0 0;
	line-height: 70%;
}
#timebar-right{
	/*display: block;*/
	
	color: #3d9ba1;
	text-align: left;
	font-size: 30px;
	font-weight: bold;
	padding:7px 3px 7px 0;
	margin:0 0 0 0;
	line-height: 75%;
}
.timebar-text-small{
	font-size:10px;
	font-weight: light;
	
}
.timebar-text-medium{
	font-size:12px;
	font-weight: light;
	
}
.timebar-text-large{
	font-size: 14px;
	font-weight: light;
}

//Forms
.x-form-fieldset-title {
	/*text-shadow:#fff 0 1px 1px;*/
	text-shadow:none;
	color:#ffffff;
	margin:1em 0.7em 0.3em;
	font-weight:bold
}
.x-form-label {
	text-shadow:#fff 0 1px 1px;
	color:#333333;
	text-shadow:rgba(255, 255, 255, 0.25) 0 0.08em 0;
	background-color:#f7f7f7;
	padding:0.6em;
	border-top:1px solid white;
	display:block
}

/////////////// Profile Paragaph Stylings ///////////////////////

.myactivity-item{
	border-top:1px solid #bfbfbf; 
	width:90%; 
	margin: 3px 0 3px 0; 
	padding: 3px 0 3px 0;
}

////////////// Just a test //////////
.x-fit-item {
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	width:320px;
}